<template>
  <div>
    <div class="singerTypeWrapper">
      <select name id v-model="singerType" @change="selectSingerType">
        <option selected="selected" value="1001">华语男</option>
        <option
          :value="item.key"
          v-for="(item, index) in singerTypeLists"
          :key="index"
        >{{item.name}}</option>
      </select>
        <button @click="buttonwrapperShow=true" class="sliderDown">
              A ~ Z
          </button>
      <div class="buttonWrapper" v-if="buttonwrapperShow">
        
        <button
          class="checkButton"
          v-for="(item, index) in firstNameLists"
          :key="index"
          @click="changeSingerType(item.key)"
        >{{item.name}}</button>
            <button class="checkButton" @click="buttonwrapperShow=false">
                收起
            </button>
      </div>

      <!-- loadmore插件 -->

      <div :style="{height:`${wrapperHeight}px`}" ref="wrapper" class="page-loadmore-wrapper">
        <mt-loadmore
         :topDistance="100"
            :topPullText="null"
          :bottomDistance="100"
          :bottomPullText="null"
          :bottom-all-loaded="allLoaded"
          :bottom-method="loadBottom"
          :auto-fill="false"
        >
          <div class="siingerListWrapper">
            <ul>
              <li v-for="(item, index) in singerList" :key="index" @click="getSongListsBysinger(item.id)">
                <p>
                  <span class="photo">
                    <img :src="item.img1v1Url" alt />
                  </span>
                  <span class="name">{{item.name}}</span>
                    <svg class="icon" aria-hidden="true" @click="openSongsByid(item.id)">
                  <use xlink:href="#icon-duolaAmeng1" />
                </svg>
                </p>
              </li>
            </ul>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import { getArtistLists } from "../../api/recommend.js";
export default {
  data() {
    return {
        buttonwrapperShow:false,
      singerType: "1001",
      allLoaded: false,
      wrapperHeight: 0,
      singerTypeLists: [
        {
          name: "华语男",
          key: "1001"
        },
        {
          name: "华语女",
          key: "1002"
        },
        {
          name: "华语组合",
          key: "1003"
        },
        {
          name: "欧美男",
          key: "2001"
        },
        {
          name: "欧美女",
          key: "2002"
        },
        {
          name: "欧美组合",
          key: "2003"
        },
        {
          name: "日本男",
          key: "6001"
        },
        {
          name: "日本女",
          key: "6002"
        },
        {
          name: "日本组合",
          key: "6003"
        },
        {
          name: "韩国男",
          key: "7001"
        },
        {
          name: "韩国女",
          key: "7002"
        },
        {
          name: "韩国组合",
          key: "7003"
        },
        {
          name: "其他男歌手",
          key: "4001"
        },
        {
          name: "其他女歌手",
          key: "4002"
        },
        {
          name: "其他组合",
          key: "4003"
        }
      ],
      limit: 30,
      firstNameLists: [
        { key: "A", name: "全部" },
        { key: "A", name: "A" },
        { key: "B", name: "B" },
        { key: "C", name: "C" },
        { key: "D", name: "D" },
        { key: "E", name: "E" },
        { key: "F", name: "F" },
        { key: "G", name: "G" },
        { key: "H", name: "H" },
        { key: "I", name: "I" },
        { key: "J", name: "J" },
        { key: "K", name: "K" },
        { key: "L", name: "L" },
        { key: "M", name: "M" },
        { key: "N", name: "N" },
        { key: "O", name: "O" },
        { key: "P", name: "P" },
        { key: "Q", name: "Q" },
        { key: "R", name: "R" },
        { key: "S", name: "S" },
        { key: "T", name: "T" },
        { key: "U", name: "U" },
        { key: "V", name: "V" },
        { key: "W", name: "W" },
        { key: "X", name: "X" },
        { key: "Y", name: "Y" },
        { key: "Z", name: "Z" }
      ],
      singerList: [],
      msg: "加载更多",
      firstName:'a'
    };
  },
  created() {
    this.selectSingerType();
  },
  methods: {
      changeSingerType(type){
          this.buttonwrapperShow=false
          this.limit=30
          this.firstName=type
          this.selectSingerType()
      },
    selectSingerType() {
      if (this.singerType) {
        getArtistLists(this.singerType, this.limit, this.firstName).then(res => {
          this.singerList = res.data.artists;
        });
      }
    },
    loadBottom() {
      this.limit += 20;
     getArtistLists(this.singerType, this.limit, this.firstName).then(res => {
        this.singerList = res.data.artists;
        if (res.data.artists.length < this.limit) {
          this.allLoaded = true; // 若数据已全部获取完毕
        }
      });
    },
    getSongListsBysinger(id) {
        this.$store.dispatch("getSingerPageLists",id)
      this.$router.push({ path: '/singerSongsList' })
    }
  },
  mounted() {
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
  }
};
</script>

<style scoped lang='stylus'>
.icon {
  width: 50px;
  height: 50px;
  fill: currentColor;
  overflow: hidden;
}
.sliderDown
    height 30px
    padding 0px 10px
    background #26a2ff;
    border 1px solid #ffffff
    font-size 18px
    font-weight 700
    color #fff
    outline none
    margin 10px
.page-loadmore-wrapper {
  overflow: scroll; 
  -webkit-overflow-scrolling : touch; 
  &::-webkit-scrollbar{
    display: none;
}
}
.siingerListWrapper
    width 100%
    margin-top 5px
    li
        height 50px
        border-bottom 1px dashed #fff
        background rgba(233,233,216,0.2)
        padding 5px 0px;
        p
            background rgba(233,233,216,0.4)
            display flex
            justify-content space-between
            margin 0 auto
            width 90%
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            span 
                line-height 50px
                margin  0px 10px
            .photo
                height 50px
                width 50px
                border-radius 50%
                overflow hidden
                display inline-block
                img 
                    width 50px
                    height 50px
            .name
                font-size 22px
                font-weight 700
                color gold
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
.singerTypeWrapper
    select
        height 30px
        width 90%
        border-radius 20px
        text-indent 20px
        font-size 16px
        outline none 
        border 0
        option
            width 100% 
    .buttonWrapper
        width 100%
        padding 10px 10px
        position absolute
        box-sizing border-box
        background rgba(27,163,223,0.8)
        z-index 10
        .checkButton
            background #26a2ff;
            height 35px
            padding 0px 11px
            outline none 
            color white
            float left
            margin 4px
            border 1px solid #ffffff
            box-sizing border-box
</style>